<template>
  <view class="login-container">
    <!-- 提示登录的图标 -->
    <uni-icons type="contact-filled" size="100" color="#AFAFAF"></uni-icons>
    <!-- 登录按钮 -->
    <button type="primary" class="btn-login" @click="wxLogin">一键登录</button>
    <!-- 登录提示 -->
    <view class="tips-text">登录后尽享更多权益</view>
  </view>
</template>

<script>
import { mapGetters, mapMutations } from 'vuex'
export default {
  computed: {
    ...mapGetters('user', ['getNavUrl'])
  },
  methods: {
    ...mapMutations('user', ['setUserInfo', 'setToken']),
    async wxLogin () {
      // 1、获取用户信息
      const [err, result] = await uni.getUserProfile({
        desc: '为了更好的给你提供服务'
      })

      if (!err) {
        // 把用户信息存储仓库中，为了用户信息页面渲染提供数据
        const { userInfo, encryptedData, iv, rawData, signature } = result
        this.setUserInfo(userInfo)

        // 2、获取登录的临时code
        const [err, res] = await uni.login()

        // 3、发请求登录，然后获取token（你们暂时做不了）
        const res2 = await uni.$request({
          url: 'users/wxlogin',
          method: 'POST',
          data: {
            encryptedData,
            iv,
            rawData,
            signature,
            code: res.code
          }
        })

        if (res2.meta.status === 200) {
          // 提示登录成功
          uni.showToast({
            title: res2.meta.msg,
            icon: 'success',
            mask: true
          })

          // 把token保存到仓库中
          this.setToken(res2.message.token)

          // 跳转到登录之前来的页面（如果有）
          if (this.getNavUrl) {
            uni.switchTab({ url: this.getNavUrl })
          }
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.login-container {
  // 登录盒子的样式
  height: 750rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #f8f8f8;
  position: relative;
  overflow: hidden;

  // 绘制登录盒子底部的半椭圆造型
  &::after {
    content: ' ';
    display: block;
    position: absolute;
    width: 100%;
    height: 40px;
    left: 0;
    bottom: 0;
    background-color: white;
    border-radius: 100%;
    transform: translateY(50%);
  }

  // 登录按钮的样式
  .btn-login {
    width: 90%;
    border-radius: 100px;
    margin: 15px 0;
    background-color: #c00000;
  }

  // 按钮下方提示消息的样式
  .tips-text {
    font-size: 12px;
    color: gray;
  }
}
</style>
